// pages/news/news.js
import * as echarts from '../../ec-canvas/echarts';
import geoJson from '../../ec-canvas/mapData.js';
const app = getApp();
let myChart1 = null;
let myChart2 = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    localConfirm:'',//确诊,
    localConfirmAdd:'',//新增确诊
    nowLocalWzz:'',//本土无症状
    localWzzAdd:'',//本土无症状增加
    nowSevere:'',//重症
    nowSevereAdd:'',//重症增加
    dead:'',//死亡
    deadAdd:'',//死亡增加
    heal:'',//治愈
    healAdd:'',//治愈增加
    updateTime:'',
    highRiskAreaNum:'',
    mediumRiskAreaNum:'',
    dataList:{},
    dataList2:{
        date:[],
        addConfirm:[],
        addHeal:[],
        addDead:[],
    },
    province:[],
    ec1: {
      lazyLoad: true
    },
    ec2: {
      lazyLoad: true
    },
    ec: {
        lazyLoad: true
      },
    maplist: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.init_echarts()

    var that = this;
   wx.request({
    url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=localCityNCOVDataList,diseaseh5Shelf',
    method:'POST',
    success: (res) => {
      
      this.setData({
        dataList:res.data.data,
      })
      that.setData({
        highRiskAreaNum:this.data.dataList.diseaseh5Shelf.chinaTotal.highRiskAreaNum,
    mediumRiskAreaNum:this.data.dataList.diseaseh5Shelf.chinaTotal.mediumRiskAreaNum,
        localConfirmAdd:this.data.dataList.diseaseh5Shelf.chinaAdd.localConfirmH5,
        nowLocalWzz: this.data.dataList.diseaseh5Shelf.chinaTotal.nowLocalWzz,
        localWzzAdd:this.data.dataList.diseaseh5Shelf.chinaTotal.localWzzAdd,
        nowSevere:this.data.dataList.diseaseh5Shelf.chinaTotal.nowSevere,
        nowSevereAdd:this.data.dataList.diseaseh5Shelf.chinaAdd.nowSevere,
        dead:this.data.dataList.diseaseh5Shelf.chinaTotal.dead,
        deadAdd:this.data.dataList.diseaseh5Shelf.chinaAdd.dead,
        heal:this.data.dataList.diseaseh5Shelf.chinaTotal.heal,
        healAdd:this.data.dataList.diseaseh5Shelf.chinaAdd.heal,
        updateTime:this.data.dataList.diseaseh5Shelf.lastUpdateTime,
      });
    }
    }),
    wx.setNavigationBarTitle({
      title: '疫情时讯'
    }),
    // this.setData({
    //   isloading:true
    // }),
    // //展示loading效果
    // wx.showLoading({
    //   title: '数据加载中...',
    // }),
    wx.request({
      
      url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=localCityNCOVDataList,diseaseh5Shelf',
      method:'POST',
      success: (res) => {
          console.log(res)
        this.setData({
          mapList:res.data.data.diseaseh5Shelf.areaTree[0].children,
          province:res.data.data.diseaseh5Shelf.areaTree[0].children,
        })
        // res.data.data.localCityNCOVDataList
         this.data.mapList.forEach(item => {
          //  console.log(item),
           item.name = item.name,
           item.values = item.total.nowConfirm
         })
        //  console.log(this.data.province[3].total.nowConfirm),
         this.requestData()
      },
      complete:() => {
        //隐藏loading效果
        wx.hideLoading()
        this.setData({
          isloading:false
        })
      }
    }),
    wx.request({
      url: 'https://api.inews.qq.com/newsqa/v1/query/pubished/daily/list?adCode=110000&limit=30',
      method:'GET',
      success: (res)=> {
          console.log(res)
          for(var i=0;i<30;i++){
            this.data.dataList2.date.push(res.data.data[i].date)
            this.data.dataList2.addConfirm.push(res.data.data[i].newConfirm)
            this.data.dataList2.addHeal.push(res.data.data[i].newHeal)
            this.data.dataList2.addDead.push(res.data.data[i].newDead)
          }
          console.log(this.data.dataList2.date)
          console.log(this.data.dataList2.addConfirm)
          console.log(this.data.dataList2.addHeal)
          console.log(this.data.dataList2.addDead)
      }
    })
    
  },
  
  requestData() {
    // var that = this;
    var mapDataArr = [{
        name: "北京",
        value: this.data.province[3].total.nowConfirm,
        // selected: true
      },
      {
        name: "天津",
        value: this.data.province[6].total.nowConfirm,
      },
      {
        name: "上海",
        value: this.data.province[2].total.nowConfirm,
      },
      {
        name: "重庆",
        value: this.data.province[15].total.nowConfirm,
      },
      {
        name: "河北",
        value: this.data.province[21].total.nowConfirm,
      },
      {
        name: "河南",
        value: this.data.province[8].total.nowConfirm,
      },
      {
        name: "云南",
        value: this.data.province[11].total.nowConfirm,
      },
      {
        name: "辽宁",
        value: this.data.province[16].total.nowConfirm,
      },
      {
        name: "黑龙江",
        value: this.data.province[17].total.nowConfirm,
      },
      {
        name: "湖南",
        value: this.data.province[22].total.nowConfirm,
      },
      {
        name: "安徽",
        value: this.data.province[26].total.nowConfirm,
      },
      {
        name: "山东",
        value: this.data.province[19].total.nowConfirm,
      },
      {
        name: "新疆",
        value: this.data.province[33].total.nowConfirm,
      },
      {
        name: "江苏",
        value: this.data.province[13].total.nowConfirm,
      },
      {
        name: "浙江",
        value: this.data.province[10].total.nowConfirm,
      },
      {
        name: "江西",
        value: this.data.province[23].total.nowConfirm,
      },
      {
        name: "湖北",
        value: this.data.province[18].total.nowConfirm,
      },
      {
        name: "广西",
        value: this.data.province[12].total.nowConfirm,
      },
      {
        name: "甘肃",
        value: this.data.province[28].total.nowConfirm,
      },
      {
        name: "山西",
        value: this.data.province[24].total.nowConfirm,
      },
      {
        name: "内蒙古",
        value: this.data.province[30].total.nowConfirm,
      },
      {
        name: "陕西",
        value: this.data.province[14].total.nowConfirm,
      },
      {
        name: "吉林",
        value: this.data.province[5].total.nowConfirm,
      },
      {
        name: "福建",
        value: this.data.province[7].total.nowConfirm,
      },
      {
        name: "贵州",
        value: this.data.province[29].total.nowConfirm,
      },
      {
        name: "广东",
        value: this.data.province[9].total.nowConfirm,
      },
      {
        name: "青海",
        value: this.data.province[31].total.nowConfirm,
      },
      {
        name: "西藏",
        value: this.data.province[32].total.nowConfirm,
      },
      {
        name: "四川",
        value: this.data.province[4].total.nowConfirm,
      },
      {
        name: "宁夏",
        value: this.data.province[27].total.nowConfirm,
      },
      {
        name: "海南",
        value: this.data.province[25].total.nowConfirm,
      },
      {
        name: "台湾",
        value: this.data.province[0].total.nowConfirm,
      },
      {
        name: "香港",
        value: this.data.province[1].total.nowConfirm,
      },
      {
        name: "澳门",
        value: this.data.province[20].total.nowConfirm,
      },
      {
        name: '南海诸岛',
        value: this.data.province[20].total.nowConfirm,
      }
    ];

    this.init_echarts1(mapDataArr)
    // this.init_echarts2(chartData)

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  //中国地图
  init_echarts1: function (chartData) {
    this.chart1Componnet = this.selectComponent('#mychart1');
    this.chart1Componnet.init((canvas, width, height, dpr) => {
      myChart1 = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      echarts.registerMap('china', geoJson); // 绘制中国地图
      myChart1.setOption(this.getChart1Option(chartData));
      return myChart1;
    });
  },
  //横柱状图
  init_echarts2: function (chartData) {
    this.chart2Componnet = this.selectComponent('#mychart2');
    this.chart2Componnet.init((canvas, width, height, dpr) => {
      myChart2 = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      myChart2.setOption(this.getChart2Option(chartData));
      return myChart2;
    });
  },

  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  getChart1Option: function (chartData) {
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: function (e) {
          // console.log(e)
          var name = e.name ? e.name : '获取中';
          var value = e.value ? e.value : '0'
          return `${name}:\n现有确诊:${value} `
        }
      },
      // 地理坐标系组件
      geo: [{
        type: "map", //图表类型
        mapType: 'china',
        roam: false, // 可以缩放和平移
        aspectScale: 0.8, // 比例
        layoutCenter: ["50%", "43%"], // position位置
        layoutSize: 360, // 地图大小，保证了不超过 370x370 的区域
        label: {
          // 图形上的文本标签
          normal: {
            show: true,
            textStyle: {
              color: "rgba(0, 0, 0, 0.9)",
              fontSize: '8'
            }
          },
          emphasis: { // 高亮时样式
            color: "#333"
          }
        },
        itemStyle: {
          // 图形上的地图区域
          normal: {
            borderColor: "rgba(0,0,0,0.2)",
            // areaColor: "#005dff"
          },
          emphasis: {
            // areaColor: "#38BC9D", //鼠标选择区域颜色
            areaColor: 'red',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        }
      }],
      //图例
      visualMap: {
        type: "piecewise", //类型为分段型。
        splitNumber: 5, //对于连续型数据，自动平均切分成几段。默认为5段。 连续数据的范围需要 max 和 min 来指定。
        pieces: [{
            min: 1000,
            label: ">1000",
            // color: "#FF0000",//里面可以加颜色
          }, // 不指定 max，表示 max 为无限大（Infinity）。
          {
            min: 100,
            max: 999,
            label: "4000-5999"
          },
          {
            min: 10,
            max: 99,
            label: "2000-3999"
          },
          {
            min: 1,
            max: 9,
            label: "1-9"
          }, // 表示 value 等于 123 的情况。
          {
            value: 0,
            label: "0"
          } // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
        textStyle: {
          fontSize: 8
        },
        realtime: false,
        calculable: false,
        inRange: {
          color: ['rgb(255,255,255)', 'rgb(250,226,214)', 'rgb(254,193,165)','rgb(254,147,101)','rgb(122,33,1)'],
        },
        orient: "horizontal",
        bottom: 10,
        left: 10,
        right: 10,
        itemHeight: 10,
        itemWidth: 8,
      },

      //图例
      // visualMap: {
      //   min: 0,
      //   max: 10000,
      //   left: 'left',
      //   top: 'bottom',
      //   itemWidth: 19,
      //   itemHeight: 60,
      //   text: ['高', '低'], // 文本，默认为数值文本
      //   calculable: true,
      //   // inRange: {
      //   //   color: ['#0055A4', '#007ADE', '#0085EF', '#0D91F9', '#62ADFB']
      //   // },
      // },

      //工具条
      toolbox: {
        show: false,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: {
            readOnly: false
          },
          restore: {},
          saveAsImage: {}
        }
      },
      series: [{
        name: '报名人数',
        type: 'map', //图表类型
        mapType: 'china',
        // selectedMode: 'multiple',
        label: {
          normal: {
            show: true,
            fontSize: 8,
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
             borderColor: 'rgb(122,33,1)',
            // areaColor: '#fff',
          },
          emphasis: {
            areaColor: 'rgb(230,74,25)',
            borderWidth: 0
          }
        },
        data: chartData
      }]
    };
    return option
  },
 
  // 折线图
  getOption: function () {
    var that = this
    // 前台配置折线线条表示属性
    // 使用for in 遍历对象拿出name,并配置icon和textStyle，最后放入新建的legendList数组中
    var legendList = []
    for (var i in that.data.series) {
      var obj = {
        name: that.data.series[i].name,
        icon: 'circle',
        textStyle: {
          color: '#000000',
        }
      }
      legendList.push(obj)
 
      that.data.series[i].data
    }
    var option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            fontSize: 0
          }
        },
        legend: {
          data: ['新增确诊', '新增治愈'],
          top: 30,
          left: 'center',
          backgroundColor: 'white',
          z: 100
        },
        // grid: {
        //   containLabel: true
        // },
        grid: {
            x: 40,
            y: 80,
            x2: 30,
            y2: 55
          },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['05.29','05.30','05.31','06.01','06.02','06.03','06.04']
        },
        yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
            }
          },
          // show: false
        },
        series: [{
          name: '新增确诊',
          type: 'line', 
          color: '#e0620d',
          smooth: true,
          data: [8, 16, 14, 11, 8, 9, 17]
        }, {
          name: '新增治愈',
          type: 'line',
          color: '#00C8C8',
          smooth: true,
          data: [50, 37, 40, 61, 53, 52, 44]
        }]
      };
    return option
  },

  onReady() {
   
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // console.log('触发了message页面的下拉刷新'),
    this.requestData(),
    this.requestData(()=>{
      wx.stopPullDownRefresh()
    }
  
    )
    },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})